import React from 'react';
import { Radio,Select,Input ,DatePicker,Button,TimePicker,Tag } from 'antd';
import { inject, observer } from 'mobx-react';
import moment from 'moment';
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const InputGroup = Input.Group;
const { TextArea } = Input;


@inject('delevlop')
@observer
export default class ApiText extends React.Component {

    constructor(props) {
        super(props);


    }

    componentWillMount() {
        this.props.delevlop.getServiceList()
    }

    changeApi(val){
        this.props.delevlop.seviceType.type=val.target.value
        this.props.delevlop.apiQueryparam.serviceType=val.target.value
        this.props.delevlop.inputNum=[]
        this.props.delevlop.getServiceList()
    }


    handleChange(val){

        this.props.delevlop.inputNum=this.props.delevlop.inputInfo.filter((e)=>{
            this.props.delevlop.apiQueryparam.interfaceCode=e.interfaceCode
            return e.interfaceName==val
        })[0].args
        this.props.delevlop.inputNum.map(e=>{
            e.value=''
        })
        this.props.delevlop.apiQueryparam.args=this.props.delevlop.inputNum
    }
    onCalendarChange(dates,dateString){
        this.props.delevlop.apiQueryparam.args.map((e)=>{
            if(e.code=='timeStart'){
                e.value=dateString
            }
        })
    }
    onCalendarChangeEnd(dates,dateString){
        this.props.delevlop.apiQueryparam.args.map((e)=>{
            if(e.code=='timeEnd'){
                e.value=dateString
            }
        })
    }
    showReslute(){
        this.props.delevlop.apiQueryparamShow=this.props.delevlop.apiQueryparam
        console.log(this.props.delevlop.apiQueryparam)
        var is_instance=null
        this.props.delevlop.apiQueryparam.args.map((e)=>{
            if(!e.value.trim()){
                if(!is_instance){
                    is_instance=window.error('输入框值不能为空')+'q' 
                }
            }else{
                this.props.delevlop.callService()
            }
        })
    }
    changeInput(i,e){
        this.props.delevlop.apiQueryparam.args[i].value=e.target.value
    }
    handleChangeInput(i,value){
      
        this.props.delevlop.apiQueryparam.args[i].value=value
    }
    onChangeTime(i,val){
        console.log(val)
        this.props.delevlop.apiQueryparam.args[i].value=val
    }
    render(){
        const {inputInfo,inputNum,apiQueryparamShow,apiQueryResultShow}=this.props.delevlop
        return (
            <div  className="w100 p20 apitext" style={{'height':'100%'}} >
                <div style={{"marginBottom":"80px"}}>
                    <h2 className="dib f18 fwb ">经营管理平台服务测试</h2>

                </div>
                <div className="fl ml-20" style={{"width":"30%"}}>
                    <RadioGroup defaultValue="0"  onChange={this.changeApi.bind(this)} >
                        <RadioButton value="0">接口类服务</RadioButton>
                        <RadioButton value="1">智呼类服务</RadioButton>
                    </RadioGroup>

                    <div className="mt-20">
                        <span>接口选择：</span>
                    <Select defaultActiveFirstOption={true}  onChange={this.handleChange.bind(this)}>
                        {inputInfo.slice().map(
                            (e)=>{
                                return (
                                    <Option value={e.interfaceName} key={e.interfaceCode}>{e.interfaceName}</Option>
                                )
                            })}

                    </Select>
                    </div>
                    <div className="inputwarp mt-20">
                        <InputGroup>
                        {inputNum.map((e,i)=> {

                            if(e.type==0){
                                return <div key={i} className="pos-rel"><Input addonBefore={e.name}  key={i} onChange={this.changeInput.bind(this,i)} style={{'marginBottom': '12px'}}/>
                                    {e.notNull?<span className="api-tips" style={{'color':'red'}}>*</span>:''}{e.remark?<Tag color="#108ee9">{e.remark}</Tag>:""}</div>
                            }else if(e.type==1){
                                return <div  key={i} className="pos-rel"><span>{e.name}:</span><TimePicker key={i} onChange={this.onChangeTime.bind(this,i)}/>
                                    {e.notNull?<span className="api-tips" style={{'color':'red'}}>*</span>:''}{e.remark?<Tag color="#108ee9">{e.remark}</Tag>:""}
                                </div>
                            }else if(e.type==2){
                                if(e.code=="timeStart"){
                                    return <div key={i} className="pos-rel"><span className="api-title">{e.name}:</span><DatePicker placeholder="开始时间" onChange={this.onCalendarChange.bind(this)}/>
                                        {e.notNull?<span className="api-tips" style={{'color':'red'}}>*</span>:''}{e.remark?<Tag color="#108ee9">{e.remark}</Tag>:""}
                                    </div>
                                }else if (e.code=="timeEnd"){
                                    return <div key={i} className="pos-rel"><span className="api-title">{e.name}:</span><DatePicker placeholder="结束时间" onChange={this.onCalendarChangeEnd.bind(this)}/>
                                        {e.notNull?<span className="api-tips" style={{'color':'red'}}>*</span>:''}{e.remark?<Tag color="#108ee9">{e.remark}</Tag>:""}
                                    </div>
                                }
                            }else{
                                return  <div  key={i} className="pos-rel api-select mb-20">
                                    <Select  onChange={this.handleChangeInput.bind(this,i)} defaultValue={e.name}>
                                        {e.options.map((e)=>{
                                        return (<Option value={e.value} key={e.key}>{e.key}</Option>)
                                      })}
                                    </Select>
                                    {e.notNull?<span className="api-tips" style={{'color':'red'}}>*</span>:''}
                                    {e.remark?<Tag color="#108ee9">{e.remark}</Tag>:""}
                                </div>
                            }
                        })}
                        </InputGroup>
                    </div>
                    <Button type="primary"  onClick={this.showReslute.bind(this)}>调用服务</Button>

                </div>

                <div className="fr mr-40">
                    <div className="mb-20">
                        <p>请求参数：</p>
                        <TextArea  rows={6} disabled value={JSON.stringify(apiQueryparamShow)}/>
                    </div>
                    <div className="mb-20">
                        <p>返回结果：</p>
                        <TextArea rows={6} disabled value={JSON.stringify(apiQueryResultShow).replace(/\\/g,'')}/>
                    </div>
                </div>
            </div>

        )
    }
}
